<template>
	<div class="app-container">
		<div class="wx-user-box">
			<div class="wx-user-title">站点审核</div>
			<div class="search-box">
				<!-- 查询 -->
				<el-form :inline="true" class="demo-form-inline">
					<el-form-item label="站点名称">
						<el-input v-model="name" placeholder="请输入站点名称查询" clearable @change="sousuo()" ></el-input>
					</el-form-item>

					<el-form-item label="状态">
						<el-select v-model="state" placeholder="请选择状态" @change="sousuo()" clearable>
							<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
						</el-select>
					</el-form-item>

					<el-form-item><el-button type="primary" @click="sousuo()" icon="el-icon-search">查询</el-button></el-form-item>
				</el-form>

				<el-table border :data="list" style="width: 100%">
					<el-table-column prop="site_name" label="站点名称"></el-table-column>
					<el-table-column prop="site_address" label="站点地址"></el-table-column>
					<el-table-column prop="device_count" label="经纬度">
						<template slot-scope="scope">
							<div>{{scope.row.site_longitude}} / {{scope.row.site_latitude}}</div>
						</template>
					</el-table-column>
					<!-- <el-table-column prop="site_address" label="平台扣点"></el-table-column> -->
					<el-table-column prop="agentname" label="代理商"></el-table-column>
					<el-table-column prop="state" label="状态">
						<template slot-scope="scope">
							<el-tag v-if="scope.row.state == 1">正常</el-tag>
							<el-tag v-if="scope.row.state == 2" type="warning">待审核</el-tag>
							<el-tag v-if="scope.row.state == 3" type="danger">审核失败</el-tag>
							<el-tag v-if="scope.row.state == 4" type="info">禁止下架</el-tag>
						</template>
					</el-table-column>
					<el-table-column prop="createtime" label="创建时间"></el-table-column>

					<el-table-column label="操作">
						<template slot-scope="scope">
							<el-button size="mini" v-if="scope.row.state == 2" @click="setAudit(scope.row.site_id)">审核</el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<!-- 分页 -->
			<div class="wx-user-pagination-div">
				<el-pagination
					background
					:current-page="currentPage"
					:page-sizes="pageSizes"
					:page-size="pageSize"
					layout="total, sizes, prev, pager, next, jumper"
					:total="total"
					:pager-count="pageCount"
					prev-text="上一页"
					next-text="下一页"
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
				/>
			</div>
		</div>

		<el-dialog title="站点审核" :visible.sync="dialogVisible" width="400px">
			 <el-input type="textarea" :rows="5" v-model="setItem.reason" placeholder="如果拒绝,请输入拒绝的原因"></el-input>
			 <span slot="footer" class="dialog-footer">
			    <el-button type="danger" @click="audit(3)">拒 绝</el-button>
			    <el-button type="primary" @click="audit(1)">通 过</el-button>
			  </span>
		</el-dialog>
	</div>
</template>

<script>
import { query ,audit} from '@/api/site-audit';
export default {
	name: 'site-audit',
	data() {
		return {
			pageSize: 10, // 每页条数
			pageCount: 7, //
			pageSizes: [10, 20, 30, 40, 50, 100], // 个数选择器
			currentPage: 1, // 当前页码
			total: 0, // 总条数
			list: [],
			setItem: {
				id:'',
				reason:'',
			},
			name: '',
			state:'',
			dialogVisible: false,
			options: [
				{
					value:1,
					label: '正常'
				},
				{
					value:2,
					label: '待审核'
				},
				{
					value:3,
					label: '审核失败'
				},
				{
					value:4,
					label: '禁止下架'
				},
			],
		};
	},
	computed: {
		
	},
	created() {
		this.getData();
	},
	methods: {
		getData() {
			let data = {
				pageNumber: this.currentPage,
				pageSize: this.pageSize
			};
			if (this.name) {
				data['name'] = this.name;
			}
			if (this.state) {
				data['state'] = this.state;
			}
			query(data).then(res => {
				if (res.state) {
					this.total = res.data.totalRow;
					this.list = res.data.list;
				} else {
					this.$message.error(res.msg);
				}
			});
		},
		setAudit(id) {
			this.setItem= {
				id:id,
				reason:'',
			},
			this.dialogVisible = true;
		},
		audit(state) {
			if (state == 3) {
				if (!this.setItem.reason) {
					this.$message.error('请输入拒绝原因！');
					return
				}
			}
			
			audit({
				id:this.setItem.id,
				state:state,
				reason:this.setItem.reason
			}).then(res => {
				if (res.state) {
					this.getData();
					this.$message({
						message: '提交成功',
						type: 'success'
					});
					this.dialogVisible = false;
				} else {
					this.$message.error(res.msg);
				}
			});
		},

		sousuo(e) {
			this.currentPage = 1;
			this.getData();
		},
		// 每页显示的条数
		handleSizeChange(val) {
			this.pageSize = val;
			this.getData(1, val);
			// 注意：在改变每页显示的条数时，要将页码显示到第一页
			this.currentPage = 1;
		},

		// 显示第几页
		handleCurrentChange(val) {
			this.currentPage = val;
			// 切换页码时，要获取每页显示的条数
			this.getData(val, this.pageSize);
		}
	}
};
</script>
<style lang="scss" scoped>

</style>
